<template>
    <div class="PsychologicalTopicDiv">
        <div class="main">
            <div class="topicDiv">
                <div class="title">十方智育心理答疑中心</div>
                <div class="item" v-for="item in topicList" :key="item.id">
                    <div class="left">
                        <el-image style="width: 100px; height: 100px" :src="url"></el-image>
                    </div>
                    <div class="right">
                        <div class="itemUser"> <i class="el-icon-user-solid"></i>{{ item.courseUser.nickname }}</div>
                        <div class="itemCompont">{{ item.context }}</div>
                        <div class="itemInfo">
                            <div class="itemInfo1">
                                <i class="el-icon-time"></i>{{ item.createtime }}
                            </div>
                            <div class="itemInfo1"> <i class="el-icon-chat-dot-square"></i>{{ item.replies.length }}
                            </div>
                            <div class="itemInfo1" @click="toReply(item.id, item.context)"> 查看回复</div>
                            <div class="itemInfo1" @click="deleteTopic(item.id)"> 删除</div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</template>

<script>
import { RouterLink } from 'vue-router';

export default {
    data() {
        return {
            url: 'https://upload-bbs.mihoyo.com/upload/2022/09/05/73825971/6b6d96aff3e41e4c92f321d44be6d273_6616837836400987747.jpg?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg',
            topicList: [],
            path: "",
        }
    },
    created() {
        this.getTopicList()
    },
    methods: {
        async deleteTopic(id) {
            await this.axios.delete("http://localhost:8080/psyopic/deletetopic", {
                params: {
                    i: id
                }
            }).then((res) => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
            }).catch((err)=>{
                console.log("删除失败");
                
            })
            this.getTopicList()
        },
        toReply(topicId, topic) {
            console.log(topicId, topic);

            console.log("跳转了");
            this.$router.push({ path: '/sspsychologicalTopic/reply', query: { topicId: topicId, topic: topic } });

        },
        async getTopicList() {
            await this.axios.get("http://localhost:8080/psyopic/topiclist")
                .then((res) => {
                    this.topicList = res.data.data
                    console.log(this.topicList);
                }).catch((err) => {
                    console.log("获取数据失败");
                    console.log(err);

                })
        }

    }
}

</script>

<style>
.main {
    width: 70%;
    height: 1000px;
    background-color: #dceffe;
    margin-left: 15%;
    margin-right: 15%;
}

.item {
    display: flex;
    padding-top: 10px;
    height: 100px;
}

.title {
    line-height: 60px;
    background-color: #d3e3fd;
    text-align: center;
    font-size: 20px;
    color: #007acc;
}

.right {
    padding-left: 10px;
    background-color: #eceff7;
    width: 100%;
}

.itemUser {
    color: #007acc;
}

.itemCompont {
    color: #3c3f41;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.itemInfo {
    color: #007acc;
    margin-top: 25px;
    display: flex;
    justify-content: flex-end;
}

.itemInfo1 {
    margin-right: 10px;
}
</style>